import React, { useState, useEffect } from 'react'
import { Table, Button, message, Modal } from 'antd'
import { withRouter } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons'
function useBasicTable3(props) {
  const [selectionType] = useState('radio')
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  const [choseId, usechoseId] = useState([])
  const [visibleBasic, useflag] = useState(false) //显示模态框
  useEffect(() => {
    console.log(choseId)
  }, [choseId])
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'orderid',
      render: (text) => <div>{text}</div>,
    },
    {
      title: '车辆编号',
      dataIndex: 'carid',
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '里程',
      dataIndex: 'mile',
    },
    {
      title: '行驶时常',
      dataIndex: 'movetime',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '开始时间',
      dataIndex: 'starttime',
    },
    {
      title: '结束时间',
      dataIndex: 'endtime',
    },
    {
      title: '订单金额',
      dataIndex: 'money',
    },
    {
      title: '实付金额',
      dataIndex: 'realmoney',
    },
  ]
  function setdata() {
    let arr = []
    for (let i = 0; i < 100; i++) {
      arr.push({
        key: i,
        orderid: '000' + i,
        carid: '0000' + i,
        username: '终结者' + i + '号',
        phone: '13111111111',
        mile: i + 'Km',
        movetime: '1' + i,
        status: i % 2 == 0 ? '正在行驶' : '停止中',
        starttime: '2020-09-19 19:44:33',
        endtime: '2020-09-22 19:45:33',
        money: '1500',
        realmoney: '1000',
      })
    }
    return arr
  }
  const data = setdata() //绑定数据
  const rowSelection = {
    selectedRowKeys: choseId,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows
      )
      usechoseId(selectedRowKeys)
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  }
  //分页
  const handleClick = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(`当前页是${current}`)
    console.log(`每页条数${pageSize}`)
  }
  function onSelectRow(rowresult) {
    console.log('点击了')
    console.log(rowresult)
    console.log(rowresult.key)
    let result = []
    result.push(rowresult.key)
    console.log('------')
    usechoseId(result)
  }
  function showDatamap() {
    if (choseId.length > 0) {
      props.history.push({ pathname: '/common/orderdetail/' + choseId[0] })
    } else {
      message.success({
        content: '请先选择一条订单',
        duration: 2,
        className: 'custom-class2',
        style: {
          marginTop: '20vh',
        },
      })
    }
  }
  function handleOk_1() {
    useflag(false)
  }
  function handleCancel_1() {
    useflag(false)
  }
  function showDatarow() {
    useflag(true)
  }
  if (choseId.length > 0) {
    return (
      <div>
        <Button
          type="primary"
          onClick={showDatamap}
          style={{ marginBottom: '30px' }}
        >
          订单详情
        </Button>
        <Button
          type="primary"
          onClick={showDatarow}
          style={{ marginBottom: '30px' }}
        >
          结束订单
        </Button>
        <Table
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
          onRow={(record) => {
            return {
              onClick: () => {
                onSelectRow(record)
              }, //点击行
            }
          }}
          pagination={{
            position: [pagnationPage],
            defaultCurrent: 1,
            defaultPageSize: 10,
            total: 50,
            onChange: handleClick,
          }}
        />
        <Modal
          title="数据详情"
          visible={visibleBasic}
          onOk={handleOk_1}
          onCancel={handleCancel_1}
          maskClosable={false}
        >
          <p>订单编号:{data[choseId[0]].orderid}</p>
          <p>车辆编号:{data[choseId[0]].carid}</p>
          <p>用户名:{data[choseId[0]].username}</p>
          <p>手机号:{data[choseId[0]].phone}</p>
        </Modal>
      </div>
    )
  } else {
    return (
      <div>
        <Button
          type="primary"
          onClick={showDatamap}
          style={{ marginBottom: '30px' }}
        >
          订单详情
        </Button>
        <Button
          type="primary"
          onClick={showDatarow}
          style={{ marginBottom: '30px' }}
        >
          结束订单
        </Button>
        <Table
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
          onRow={(record) => {
            return {
              onClick: () => {
                onSelectRow(record)
              }, //点击行
            }
          }}
          pagination={{
            position: [pagnationPage],
            defaultCurrent: 1,
            defaultPageSize: 10,
            total: 50,
            onChange: handleClick,
          }}
        />
        <Modal
          title="数据详情"
          visible={visibleBasic}
          onOk={handleOk_1}
          onCancel={handleCancel_1}
          maskClosable={false}
        >
          <p>请先选择一条数据</p>
        </Modal>
      </div>
    )
  }
}

export default withRouter(useBasicTable3)
